<template>
  <el-dialog title="地址详情" :visible.sync="newValue" :close-on-click-modal="false">
    <el-table
      v-loading="waresLodding"
      :data="data"
      border
      fit
      style="width: 100%;"
    >
      <el-table-column label="姓名" width="150px">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150px">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="详细地址" width="250px">
        <template slot-scope="{row}">
          <span>{{ row.city || '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="门牌号">
        <template slot-scope="{row}">
          <span>{{ row.address || '暂无' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="默认地址">
        <template slot-scope="{row}">
          <el-tag v-if="row.isDefault">是</el-tag>
          <el-tag v-else type="info">否</el-tag>
        </template>
      </el-table-column>
    </el-table>
    </el-form>

    <div slot="f  ooter" class="dialog-footer">
      <el-button @click="newValue = false">
        关闭
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getAddress } from '@/api/customer'
export default {
  props: {
    gid: {
      type: String,
      required: false,
      default() {
        return ''
      }
    },
    value: {
      type: Boolean,
      required: false,
      default() {
        return false
      }
    }
  },
  data() {
    return {
      data: [],
      dialogFormVisible: false,
      waresLodding: true
    }
  },
  computed: {
    newValue: {
      get() {
        this.getAddress()
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  },
  methods: {
    getAddress() {
      this.waresLodding = true
      getAddress({ gid: this.gid }).then(res => {
        this.data = res.result.list
        this.waresLodding = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
